<template>
  <!-- 头部 -->
  <div :class="[CurrentName == 'frontPage' ? 'cha' : 'top']">
    <div class="top-box">
      <div class="logo">
        <img src="../assets/images/logo.png" alt="logo" />
      </div>
      <ul class="nav">
        <li class="checked">
          <router-link :to="{ path: '/frontPage/frontPage' }">首页</router-link>
        </li>
        <li><router-link :to="{ path: '/myus/Myus' }">我们</router-link></li>
        <li class="checkeda" ref="name">
          <router-link :to="{ path: '/product/Product' }">产品 </router-link>
          <div
            ref="product"
            style="
              position: absolute;
              bottom: 0px;
              line-height: 30px;
              z-index: 99;
              color: #ffff00;
              display: none;
              text-align: left;
            "
          >
            <div
              @click="jumpHardcover(item.groupName, item.groupId)"
              v-for="item in groupList"
              :key="item.groupId"
            >
              {{ item.groupName }}
            </div>
          </div>
        </li>
        <li>
          <router-link :to="{ path: '/microvision/Microvision' }"
            >微视</router-link
          >
        </li>
        <li ref="names" class="fentan">
          <a href="#">封坛</a>
          <!-- 封坛 -->
          <div
            ref="sealthealtar"
            style="
              position: absolute;
              bottom: 0px;
              line-height: 30px;
              z-index: 99;
              color: #ffff00;
              display: none;
            "
          >
            <div @click="jumpCustomAltar(1)">封坛</div>
            <div @click="jumpCustomAltar(2)">制定</div>
          </div>
        </li>
        <!-- <li><router-link :to="{ path: '/Winecellar' }">酒窖</router-link></li> -->
        <!-- <li><router-link :to="{ path: '/Join' }">加盟</router-link></li> -->
        <li><router-link :to="{ path: '/mall/Mall' }">商城</router-link></li>
        <!-- <li><router-link :to="{ path: '/Connect' }">联系</router-link></li> -->
      </ul>
      <div class="navs-box">
        <!-- {{ chenge ? "关闭" : "展开" }} -->
        <div @click="bb" class="navs-btn">
          <i class="el-icon-s-operation"></i>
        </div>
        <ul class="navs" v-if="chenge" @click="chengeType">
          <div class="navs-t">
            <li class="checked">
              <router-link :to="{ path: '/frontPage/frontPage' }"
                >首页</router-link
              >
            </li>
            <li>
              <router-link :to="{ path: '/myus/Myus' }">我们</router-link>
            </li>
            <li>
              <router-link :to="{ path: '/product/Product' }">产品</router-link>
            </li>
            <li>
              <router-link :to="{ path: '/microvision/Microvision' }"
                >微视</router-link
              >
            </li>
            <li>
              <router-link :to="{ path: '/sealtheAltar/SealtheAltar' }"
                >封坛</router-link
              >
            </li>
            <!-- <li>
              <router-link :to="{ path: '/Winecellar' }">酒窖</router-link>
            </li> -->
            <!-- <li><router-link :to="{ path: '/Join' }">加盟</router-link></li> -->
            <li>
              <router-link :to="{ path: '/mall/Mall' }">商城</router-link>
            </li>
            <!-- <li><router-link :to="{ path: '/Connect' }">联系</router-link></li> -->
          </div>
        </ul>
      </div>
    </div>
  </div>
</template>

<script >
import { getGoodsGroup } from "../api/goods";
export default {
  name: "MyHead",
  data() {
    return {
      CurrentName: "",
      type: false,
      chenge: false,
      groupList: [], //产品分组列表
    };
  },
  created() {
    this.GoodsGroup();
  },
  mounted() {
    this.route();
    this.onmo();
    // onmouseover
  },
  methods: {
    //产品分组列表
    GoodsGroup() {
      getGoodsGroup().then((res) => {
        console.log("分组", res.data.data.records);
        this.groupList = res.data.data.records;
      });
    },
    onmo() {
      var isd = this.$refs.product;
      var asd = this.$refs.name;
      var names = this.$refs.names;
      var sealthealtar = this.$refs.sealthealtar;
      // var width = document.documentElement.clientWidth;
      // console.log(width);
      // console.log(names);
      // console.log(isd);
      // console.log(asd);

      // 鼠标经过nav中的产品、封坛
      asd.onmouseover = function () {
        // console.log("进入");
        isd.style.display = "block";
      };
      asd.onmouseout = function () {
        // console.log("离开");
        isd.style.display = "none";
      };
      names.onmouseover = function () {
        sealthealtar.style.display = "block";
      };
      names.onmouseout = function () {
        sealthealtar.style.display = "none";
      };
    },
    chengeType() {
      this.chenge = false;
    },
    jumpCustomAltar(e) {
      if (e == 1) {
        // 跳转到封坛
        this.$router.push({ path: "/sealtheAltar/SealtheAltar" });
      } else if (e == 2) {
        // 跳转到定制
        this.$router.push({ path: "/sealtheAltar/formulate" });
      }
    },
    jumpHardcover(name, id) {
      this.$router.push({
        name: "hardcover",
        query: {
          xtitle: name,
          groupId: id,
        },
      });
    },
    bb() {
      console.log(123);
      this.chenge = !this.chenge;
    },
    route() {
      // 获取当前路由name
      this.CurrentName = this.$route.name;
      console.log(123, this.CurrentName);
    },
  },
};
</script>
 
 
<style lang="less" scoped>
// 头部
@media screen and (min-width: 1029px) {
  .top {
    width: 100%;
    background: url("../assets/images/topbj.jpg") center;
    position: relative;
    .top-box {
      width: 100%;
      height: 150px;
      margin: auto;
      display: flex;
      align-items: center;
      .logo {
        width: 30%;
        img {
          width: 100%;
        }
      }
      .nav {
        width: 70%;
        margin-left: 86px;
        display: flex;
        justify-content: space-around;
        font-size: 20px;
        li {
          line-height: 150px;
          margin-bottom: 3px;

          a {
            padding: 60px 0;
            color: #ffff00;
            //激活状态链接
            &.router-link-active {
              //这样子写完是绝对激活状态
              border-bottom: 3px solid #ffffff;
            }
          }
        }
      }
      .navs-box {
        display: none;
        height: 100%;

        .navs-btn {
          position: absolute;
          right: 10%;
          bottom: 50px;
          z-index: 999;
        }
        .navs {
          width: 100%;
          height: 100vh;
          padding-top: 100px;
          background-color: #00000071;
          position: absolute;
          animation: fadenum 0.5s ease;
          left: 0px;
          z-index: 99;
          .navs-t {
            width: 80%;
            margin: auto;

            li {
              width: 70%;
              margin: auto;
              display: flex;
              justify-content: flex-start;
              margin-bottom: 5px;
              border-bottom: 1px solid #9292929d;
              a {
                color: #ffffff;
                padding: 5px 0;
              }
            }
          }
        }
      }
    }
  }
  .cha {
    width: 100%;
    background: url("../assets/images/topbj.jpg") center;
    position: relative;
    .top-box {
      width: 70%;
      height: 150px;
      margin: auto;
      display: flex;
      align-items: center;
      .logo {
        width: 30%;
        img {
          width: 100%;
        }
      }
      .nav {
        width: 70%;
        margin-left: 86px;
        display: flex;
        justify-content: space-around;
        font-size: 20px;
        li {
          line-height: 150px;
          margin-bottom: 3px;

          a {
            padding: 60px 0;
            color: #ffff00;
            //激活状态链接
            &.router-link-active {
              //这样子写完是绝对激活状态
              border-bottom: 3px solid #ffffff;
            }
          }
          // a:hover {
          //   color: #ffffff;
          // }
        }
      }
      .navs-box {
        display: none;
        height: 100%;

        .navs-btn {
          position: absolute;
          right: 10%;
          bottom: 50px;
          z-index: 999;
        }
        .navs {
          width: 100%;
          height: 100vh;
          padding-top: 100px;
          background-color: #00000071;
          position: absolute;
          animation: fadenum 0.5s ease;
          left: 0px;
          z-index: 99;
          .navs-t {
            width: 80%;
            margin: auto;
            // display: flex;
            // justify-content: space-around;
            // flex-wrap: wrap;
            li {
              width: 70%;
              margin: auto;
              display: flex;
              justify-content: flex-start;
              margin-bottom: 5px;
              border-bottom: 1px solid #9292929d;
              a {
                color: #ffffff;
                padding: 5px 0;
              }
            }
          }
        }
      }
    }
  }
}
@media only screen and (min-width: 750px) and (max-width: 1028px) {
  .top {
    width: 100%;
    background: url("../assets/images/topbj.jpg") center;
    position: relative;
    .top-box {
      width: 100%;
      height: 100px;
      margin: auto;
      display: flex;
      align-items: center;
      .logo {
        width: 30%;
        img {
          width: 100%;
        }
      }
      .nav {
        width: 70%;
        margin-left: 86px;
        display: flex;
        justify-content: space-around;
        font-size: 16px;
        li {
          line-height: 150px;
          margin-bottom: -3px;
          a {
            padding: 60px 0;
            color: #ffff00;
            //激活状态链接
            &.router-link-active {
              //这样子写完是绝对激活状态
              border-bottom: 3px solid #ffffff;
            }
          }
        }
        // .fentan {
        //   .aaa {
        //     position: absolute !important;
        //     bottom: -25px !important;
        //     line-height: 30px !important;
        //     z-index: 999 !important;
        //     color: #ffff00;
        //     display: none !important;
        //   }
        // }
      }
      .navs-box {
        display: none;
        height: 100%;
        .navs-btn {
          position: absolute;
          right: 10%;
          bottom: 50px;
          z-index: 999;
        }
        .navs {
          width: 100%;
          height: 100vh;
          padding-top: 100px;
          background-color: #00000071;
          position: absolute;
          animation: fadenum 0.5s ease;
          left: 0px;
          z-index: 99;
          .navs-t {
            width: 80%;
            margin: auto;
            // display: flex;
            // justify-content: space-around;
            // flex-wrap: wrap;
            li {
              width: 70%;
              margin: auto;
              display: flex;
              justify-content: flex-start;
              margin-bottom: 5px;
              border-bottom: 1px solid #9292929d;
              a {
                color: #ffffff;
                padding: 5px 0;
              }
            }
          }
        }
      }
    }
  }
  .cha {
    width: 100%;
    background: url("../assets/images/topbj.jpg") center;
    position: relative;
    .top-box {
      width: 100%;
      height: 100px;
      margin: auto;
      display: flex;
      align-items: center;
      .logo {
        width: 30%;
        img {
          width: 100%;
        }
      }
      .nav {
        width: 70%;
        margin-left: 86px;
        display: flex;
        justify-content: space-around;
        font-size: 16px;
        li {
          line-height: 150px;
          margin-bottom: -3px;
          a {
            padding: 60px 0;
            color: #ffff00;
            //激活状态链接
            &.router-link-active {
              //这样子写完是绝对激活状态
              border-bottom: 3px solid #ffffff;
            }
          }
        }
      }
      .navs-box {
        display: none;
        height: 100%;
        .navs-btn {
          position: absolute;
          right: 10%;
          bottom: 50px;
          z-index: 999;
        }
        .navs {
          width: 100%;
          height: 100vh;
          padding-top: 100px;
          background-color: #00000071;
          position: absolute;
          animation: fadenum 0.5s ease;
          left: 0px;
          z-index: 99;
          .navs-t {
            width: 80%;
            margin: auto;
            // display: flex;
            // justify-content: space-around;
            // flex-wrap: wrap;
            li {
              width: 70%;
              margin: auto;
              display: flex;
              justify-content: flex-start;
              margin-bottom: 5px;
              border-bottom: 1px solid #9292929d;
              a {
                color: #ffffff;
                padding: 5px 0;
              }
            }
          }
        }
      }
    }
  }
}
@media screen and (max-width: 749px) {
  .top {
    width: 100%;
    background: url("../assets/images/topbj.jpg") center;
    position: relative;
    // background-size: 100% 50%;
    .top-box {
      width: 100%;
      height: 30px;
      margin: auto;
      display: flex;
      align-items: center;
      .logo {
        width: 30%;
        img {
          width: 100%;
        }
      }

      .nav {
        width: 70%;
        margin-left: 86px;
        display: none;
        justify-content: space-around;
        font-size: 16px;
        li {
          line-height: 150px;
          margin-bottom: -3px;
          a {
            padding: 60px 0;
            color: #ffff00;
            //激活状态链接
            &.router-link-active {
              //这样子写完是绝对激活状态
              border-bottom: 3px solid #ffffff;
            }
          }
        }
      }
      .navs-box {
        height: 100%;
        .navs-btn {
          position: absolute;
          right: 5%;
          bottom: 7px;
          z-index: 999;
          color: #ffffff;
        }
        .navs {
          width: 100%;
          height: 100vh;
          padding-top: 100px;
          background-color: #000000;
          position: absolute;
          animation: fadenum 0.5s ease;
          left: 0px;
          z-index: 99;
          .navs-t {
            width: 80%;
            margin: auto;
            // display: flex;
            // justify-content: space-around;
            // flex-wrap: wrap;
            li {
              width: 70%;
              margin: auto;
              display: flex;
              justify-content: flex-start;
              margin-bottom: 5px;
              border-bottom: 1px solid #9292929d;
              a {
                color: #ffffff;
                padding: 5px 0;
              }
            }
          }
        }
      }
    }
  }
  .cha {
    width: 100%;
    background: url("../assets/images/topbj.jpg") center;
    position: relative;
    // background-size: 100% 50%;
    .top-box {
      width: 100%;
      height: 40px;
      margin: auto;
      display: flex;
      align-items: center;
      .logo {
        width: 30%;
        margin-left: 20px;
        img {
          width: 100%;
        }
      }

      .nav {
        width: 70%;
        margin-left: 86px;
        display: none;
        justify-content: space-around;
        font-size: 16px;
        li {
          line-height: 150px;
          margin-bottom: -3px;
          a {
            padding: 60px 0;
            color: #ffff00;
            //激活状态链接
            &.router-link-active {
              //这样子写完是绝对激活状态
              border-bottom: 3px solid #ffffff;
            }
          }
        }
      }
      .navs-box {
        height: 100%;
        .navs-btn {
          position: absolute;
          right: 10%;
          bottom: 11px;
          z-index: 999;
        }
        .navs {
          width: 100%;
          height: 100vh;
          padding-top: 100px;
          background-color: #000000ab;
          position: absolute;
          animation: fadenum 0.5s ease;
          left: 0px;
          z-index: 99;
          .navs-t {
            width: 80%;
            margin: auto;
            // display: flex;
            // justify-content: space-around;
            // flex-wrap: wrap;
            li {
              width: 70%;
              margin: auto;
              display: flex;
              justify-content: flex-start;
              margin-bottom: 5px;
              border-bottom: 1px solid #9292929d;
              a {
                color: #ffffff;
                padding: 5px 0;
              }
            }
          }
        }
      }
    }
  }
  @keyframes fadenum {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 0.5;
    }
    100% {
      opacity: 1;
    }
  }
}
</style>

